
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/demo-styles.css" />
 <script src="../js/modernizr-1.5.min.js"></script>
 <script>
 function getId(id) {
		return document.getElementById(id);
	}
 function love(){
	 var part = document.getElementById("page").value;
	 location.href="Main.jsp?inc_content=Worksview.jsp&part=" + part;
 } 
 </script>
</head>
<body>
	

	<%	
		int nowPage = 1;
		session.setAttribute("nowPage", nowPage);
		String inc_content = request.getParameter("inc_content");
		if (inc_content == null || inc_content == "") {
			inc_content = "Worksview.jsp";
		}
	%>

	<%-- 	<%
		request.setCharacterEncoding("utf-8");
		// 센터 
		String inc_content = request.getParameter("inc_content");
		if (inc_content == null || inc_content == "") {
			inc_content = "Worksview.jsp";
		}
	%>
 --%>
  <!-- ===============================Start Demo==================================================== -->
<div class="demo-wrapper">
<!-- classnames for the pages should include: 1) type of page 2) page name -->
		<div class="s-page random-restored-page">
				<input type="button" value="semi" id="page" onclick="love()">
<!-- 			<h2 class="page-title">Semi Project</h2> -->
			<div class="close-button s-close-button">x</div>
		</div>

		<div class="s-page random-restored2-page">
		
		<input type="button" value="html" id="page" onclick="love()">
		
			<h2 class="page-title">Html/CSS</h2>
			<div class="close-button s-close-button">x</div>
		</div>

		<div class="s-page custom-page">
		
		<input type="button" value="" id="page" onclick="love()">
		
			<h2 class="page-title">Thank You!</h2>
			<div class="close-button s-close-button">x</div>
		</div>

		<div class="s-page custom2-page">
		
		<input type="button" value="chat" id="page" onclick="love()">
		
			<h2 class="page-title">Chatting Program</h2>
			
			<div class="close-button s-close-button">x</div>
		</div>

		<div class="s-page custom3-page">
				<input type="button" value="rock" id="page" onclick="love()">
			<div class="close-button s-close-button">x</div>
		</div>

		<div class="s-page custom4-page">
				<input type="button" value="twenty" id="page" onclick="love()">
			<h2 class="page-title">Twenty Question</h2>
			<div class="close-button s-close-button">x</div>
		</div>

		<div class="s-page custom5-page">
			<h2 class="page-title">custom5</h2>
			<div class="close-button s-close-button">x</div>
		</div>

		<div class="r-page random-r-page">
			<div class="page-content">
				<h2 class="page-title">r</h2>
				<p>r</p>
			</div>

			<div class="close-button r-close-button">x</div>
		</div>

		<div class="r-page random-r2-page">
			<div class="page-content">
				<input type="button" value="android" id="page" onclick="love()">
				<!-- <h2 class="page-title">Android</h2>
				<p>컨텐츠 내용</p> -->
			</div>
			<div class="close-button r-close-button">x</div>
		</div>

		<div class="r-page random-r3-page">
			<div class="page-ontent">
 				<h2 class="page-title">r3</h2>
				<p>r3</p>
			</div>

			<div class="close-button r-close-button">x</div>
		</div>

		<div class="r-page random-r4-page">
			<div class="page-content">
				<h2 class="page-title">r4</h2>
				<p>r4</p>
			</div>

			<div class="close-button r-close-button">x</div>
		</div>

		<div class="r-page random-r5-page">
			<div class="page-content">
				<input type="button" value="bingo" id="page" onclick="love()">
				<h2 class="page-title">Bingo Game</h2>
				<p>컨텐츠 내용</p>
			</div>

			<div class="close-button r-close-button">x</div>
		</div>

		<!--each tile should specify what page type it opens (to determine which animation) and the corresponding page name it should open-->
  <div class="dashboard clearfix">
    <ul class="tiles">
      <div class="col1 clearfix">
        <li class="tile tile-big tile-1 slideTextUp" data-page-type="r-page" data-page-name="random-r2-page">
          <div><p>Android</p></div>
          <div><p>View all tasks</p></div>
        </li>
        
        
	 	<li class="tile tile-2xbig tile-9 fig-tile" data-page-type="s-page" data-page-name ="random-restored-page">
          <figure>
            <img src="../images/project.JPG" />
            <figcaption class="tile-caption caption-bottom">Semi - Project</figure>
        </li>


       <!--  <li class="tile tile-small tile tile-2 slideTextRight" data-page-type="s-page" data-page-name ="random-restored-page">
          <div><p class="icon-arrow-right"></p></div>
          <div><p>Tile's content slides right. Page opens from left</p></div>
        </li>
        <li class="tile tile-small last tile-3" data-page-type="r-page" data-page-name="random-r3-page">
          <p class="icon-calendar-alt-fill"></p>
        </li>
        <li class="tile tile-big tile-4 fig-tile" data-page-type="r-page" data-page-name="random-r4-page">
          <figure>
            <img src="../images/blue.jpg" />
            <figcaption class="tile-caption caption-left">Slide-out Caption from left</figcaption>
          </figure>
        </li> -->
      </div>

      <div class="col2 clearfix">
        <li class="tile tile-big tile-5" data-page-type="s-page" data-page-name="custom3-page">
          <div><p><span class="icon-cloudy"></span>Rock-Paper-Scissors</p></div>
        </li>
        <li class="tile tile-big tile-6 slideTextLeft" data-page-type="s-page" data-page-name="custom4-page">
          <div><p><span class="icon-skype"></span>Twenty Question</p></div>
          <div><p>Make a Call</p></div>
        </li>
        
        <li class="tile tile-big tile-16 slideTextLeft" data-page-type="r-page" data-page-name="random-r5-page">
          <div><p><span class="icon-skype"></span>Bingo Game</p></div>
          <div><p>Welcome To JAVA #2</p></div>
        </li>
        
        
        <!--Tiles with a 3D effect should have the following structure:
            1) a container inside the tile with class of .faces
            2) 2 figure elements, one with class .front and the other with class .back-->
        <!-- <li class="tile tile-small tile-7 rotate3d rotate3dX" data-page-type="s-page" data-page-name="custom5-page">
          <div class="faces">
            <div class="front"><span class="icon-picassa"></span></div>
            <div class="back"><p>Launch Picassa</p></div>
          </div>
        </li>
        <li class="tile tile-small last tile-8 rotate3d rotate3dY" data-page-type="r-page" data-page-name="random-r5-page">
          <div class="faces">
            <div class="front"><span class="icon-instagram"></span></div>
            <div class="back" id='back'><img src='../images/img12.jpg'></div>
          </div>
        </li> -->
      </div>

      <div class="col3 clearfix">      
        <li class="tile tile-2xbig tile-9 fig-tile" data-page-type="s-page" data-page-name ="random-restored2-page">
          <figure>
            <img src="../images/html5.png" />
            <figcaption class="tile-caption caption-bottom">Html/CSS
            </figure>
        </li>
        <li class="tile tile-big tile-10" data-page-type="s-page" data-page-name="custom2-page">
          <div><p><span class="icon-skype"></span>Chatting Program</p></div>
          <!-- <div><p>Chatting Program</p></div> -->
        </li>
      </div>
    </ul>
  </div><!--end dashboard-->

</div>
<!--====================================end demo wrapper================================================-->
  <script src="../js/jquery-1.8.2.min.js"></script>
  <script src="../js/scripts.js"></script>
</body>
</html>